<!-- 审核 -->
<template>
  <div class="box-content">
    <div class="basic-box">
      <div class="box-left" :style="{ width: leftWidth + '%' }">
        <handle />
      </div>
      <div class="box-right" :style="{ width: rightWidth + '%' }">
        <i @click="changeWidth" :class="iocnClass" class="suncnui"></i>
        <div class="proposal-audit-record-content">
          <sectionTitle>审核记录</sectionTitle>
          <div class="proposal-audit-record-item">
            <span class="audit-item-name">一审</span>
            <div class="line"></div>
            <div class="audit-item-message">
              <p>
                <label>审核人：</label>
                <span>业务管理员</span>
                <label>审核时间：</label>
                <span> 2021-03-08 11:38</span>
              </p>

              <p class="f14">
                <label>主办单位：</label>
                <span>市教育局</span>
              </p>

              <p class="f14">
                <label>具体意见：</label>
                <span>地方</span>
              </p>

              <div class="audit-item-message-line"></div>
              <div class="audit-icon agree"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <choice-modal :visible.sync="choiceVisible" />
  </div>
</template>

<script>
import handle from 'views/role_org/proposal/handle/handle'
import choiceModal from 'components/base/choiceModal'
import changeWidth from 'mixins/change-width'
import sectionTitle from 'components/base/sectionTitle'
export default {
  components: { handle, choiceModal, sectionTitle },
  data() {
    return {
      id: '',
      records: {},
      form: {
        status: '1',
        suggestions: '',
        strCheckResultState: 1
      },
      rules: {
        status: [{ required: true, trigger: 'change' }]
      },
      choiceVisible: false
    }
  },
  mixins: [changeWidth],
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    //审核确定回调
    handleAduit() {}
  },
  created() {}
}
</script>
<style lang='less' scoped>
.form {
  position: relative;
  height: 100%;
  overflow-y: auto;
  /deep/.ant-form-item {
    padding: 0px 30px 15px 0px;
  }
  /deep/.ant-form-item label {
    color: #919191;
  }
}
.form-footer {
  position: absolute;
  padding: 15px 0;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.box-right {
  overflow: initial;
  padding: 0;
  transition: width 1s;
}
.box-left {
  padding: 0;
  transition: width 1s;
}
.suncnui {
  height: 30px;
  line-height: 30px;
  background: @base-color;
  padding: 0 18px;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  font-size: 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  width: 60px;
  position: absolute;
  top: 0px;
  left: -60px;
}
.proposal-audit-record-item .audit-item-name {
  padding: 0 5px;
  width: 70px;
  box-sizing: border-box;
  height: 100%;
}

.audit-item-message {
  padding-left: 10px;
  padding-bottom: 20px;
  position: relative;
}

.proposal-audit-record-item {
  position: relative;
  overflow: hidden;
  padding-left: 70px;
  box-sizing: border-box;
}

.proposal-audit-record-item .audit-item-name {
  color: #097bc7;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  width: 60px;
  border-radius: 15px;
  background: #e8f0f6;
  z-index: 99;
  position: absolute;
  left: 5px;
  top: 0;
}

.proposal-audit-record-item div.line {
  position: absolute;
  left: 34px;
  top: 0;
  z-index: 0;
  width: 1px;
  height: 100%;
  background: #e2e7ec;
}
.audit-item-message p {
  line-height: 30px;
}
.audit-item-message p span {
  margin-right: 20px;
  color: #333333;
}
.audit-item-message p label {
  color: #919191;
}
.audit-item-message-line {
  margin-top: 20px;
}
.proposal-audit-record-content {
  padding: 0 15px;
}
</style>